<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扫光效果</title>
    <style>
      html,
      body {
        font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        background: #000;
      }
      /* text: 前端侦探 */
      @font-face {
        font-family: "RZGFDHDHJ";
        src: url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=1&font=RZGFDHDHJ&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2"); /* IE9 */
        src: local("☺"),
          url(data:font/woff;charset=utf-8;base64,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)
            format("woff");
      }
      h1 {
        font-size: 60px;
        font-family: "RZGFDHDHJ";
        font-weight: normal;
        color: #9747ff;
        margin: 0;
      }
      .shark-txt {
        -webkit-text-fill-color: transparent;
        background: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0) 60%
          ) -100%/50% no-repeat currentColor;
        background-clip: text;
        animation: shark-txt 2s infinite;
      }
      @keyframes shark-txt {
        to {
          background-position: 200%;
        }
      }

      .logo {
        display: block;
        width: 150px;
      }

      .shark-wrap {
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
      }
      .shark-wrap::after {
        content: "";
        position: absolute;
        inset: -20%;
        background: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0) 40%,
          rgba(255, 255, 255, 0.7),
          rgba(255, 255, 255, 0) 60%
        );
        animation: shark-wrap 2s infinite;
        transform: translateX(-100%);
      }
      @keyframes shark-wrap {
        to {
          transform: translateX(100%);
        }
      }
      .card {
        width: 300px;
        border-radius: 8px;
        background-color: #ffe8a3;
      }
      .card img {
        display: block;
        width: 100%;
      }
      .radius {
        width: 150px;
        border-radius: 50%;
      }
      .radius img {
        display: block;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1 class="shark-txt">前端侦探</h1>
    <div class="shark-wrap card">
      <img src="./images/ececa9a5.7y0amw.png" />
    </div>
    <div class="shark-wrap radius">
      <img src="./images/974ffb90.08i19r.png" />
    </div>
  </body>
</html>
